<template>
	<div>
	  <div class="notice-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
		<transition name="notice-slide">
		  <p class="notice-item" :key="noticeList.id">
			{{ noticeList.text }}
		  </p>
		</transition>
	  </div>
	</div>
  </template>
  <template>
	<div>
	  <div class="notice-box" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
		<transition name="notice-slide">
		  <p class="notice-item" :key="noticeList.id">
			{{ noticeList.text }}
		  </p>
		</transition>
	  </div>
	</div>
  </template>

  <script>
export default {
  name: 'scroll',
  data() {
    return {
      noticeArr: [
        { title: '第1条公告1111111111111111' },
        { title: '第2条公告2222222222222222' },
        { title: '第3条公告3333333333333333' },
        { title: '第4条公告4444444444444444' },
        { title: '第5条公告5555555555555555' },
      ],
      number: 0,
    };
  },
  computed: {
    noticeList() {
      return {
        id: this.number,
        text: this.noticeArr[this.number].title,
      };
      timer:nuul
    },
  },
  mounted() {
    this.scrollMove();
  },
  methods: {
  	//滚动函数
    scrollMove() {
      this.timer = setTimeout(() => {
        if (this.number === this.noticeArr.length - 1) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.scollMove();
      }, 3000);
    },
    //鼠标进入
    mouseEnter() {
      clearInterval(this.timer);
    },
    //鼠标离开
    mouseLeave() {
      this.scrollMove();
    }
  }
};
</script>


  <style scoped>
.notice-box {
  width: 500px;
  height: 30px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  text-align: center;
  border: 1px solid red;
}
.notice-item {
  width: 100%;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  position: absolute;
  top: 0;
}
.notice-slide-enter-active,
.notice-slide-leave-active {
  transition: all 0.8s linear;
}
.notice-slide-enter {
  top: 30px;
}
.notice-slide-leave-to {
  top: -30px;
}
</style>

  